<!DOCTYPE html>
<html lang="en" style="height: 100%;padding: 0;margin: 0">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .login_container{
            background-color: #2b4b6b;
            height: 100%;
        }
        .login_box{
            width: 450px;
            height: 300px;
            background-color: white;
            border-radius: 3px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);

        }
        .login_box .avatar_box{
            height: 130px;
            width: 130px;
            border: 1px solid #eee;
            border-radius: 50%;
            padding: 10px;
            box-shadow: 0 0 10px #ddd;
            position: absolute;
            left: 50%;
            transform: translate(-50%,-50%);
            background-color: #fff;
        }
        .login_box .avatar_box img{
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background-color: #eee;
        }
        .btns{
            display: flex;
            justify-content: flex-end;
        }
        .login_form{
            position: absolute;
            bottom: 0;
            width: 100%;
            padding: 0 20px;
            box-sizing: border-box;
        }
    </style>

    <link rel="stylesheet" type="text/css" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

</head>
<body style="height: 100%;padding: 0;margin: 0">



<div class="login_container">

    <div class="login_box">
         <div class="avatar_box">
             <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607445696886&di=5855afc3b7c0eda842952a452f148b8f&imgtype=0&src=http%3A%2F%2Fwx2.sinaimg.cn%2Fbmiddle%2F93b64d65ly1fu29v3ookhj20jg0jgaba.jpg" alt="">
         </div>

        <el-form class="login_form"  :model="loginForm" :rules="loginFormRules" ref="loginFormRef">
            <el-form-item prop="username">
                <el-input prefix-icon="el-icon-user-solid" v-model="loginForm.username" ></el-input>
            </el-form-item>

            <el-form-item prop="password">
                <el-input prefix-icon="el-icon-lock"  v-model="loginForm.password" type="password" ></el-input>
            </el-form-item>


            <el-form-item class="btns">
                <el-button type="primary" @click="login">登录</el-button>
                <el-button type="info" @click="resetLoginForm">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</div>

</body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

<script>
    new Vue({
        el: '.login_container',
        data() {
            return {
                loginForm: {
                    username: '',
                    password: '',
                },
                loginFormRules:{
                    username:[
                        { required: true, message: '请输入登录名称', trigger: 'blur' },
                        { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
                    ],
                    password:[
                        { required: true, message: '请输入登录密码', trigger: 'blur' },
                        { min: 3, max: 16, message: '长度在 3 到 16 个字符', trigger: 'blur' }
                    ],
                }
            }
        },
        methods:{
            resetLoginForm(){
              // console.log(this)
                this.$refs.loginFormRef.resetFields();
            },
            login(){
                this.$refs.loginFormRef.validate((valid) => {
                    // 为给定 ID 的 user 创建请求
                    axios.get('http://localhost:8080/adminLogin?userName=admin&passWord=123456')
                        .then(function (response) {
                            console.log(response);
                            location.href="http://localhost:63343/qiguai/html/hGoodShow.html?_ijt=13nk4nc11f91a7v2ob26kk2ql9"
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                });
            }
        }
    })
</script>


</html>